     <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问来源环形饼图</title>
  引入 ECharts 库
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 600px;
            height: 400px;
            margin: 30px auto;
        }
    </style>
</head>
<body>
   图表容器 
    <div id="chart-container"></div>

    <script>
        //始化图表
        var chart = echarts.init(document.getElementById('chart-container'));

        // 配置项
        var option = {
            // 标题配置
            title: {
                text: '访问来源统计', 
                subtext: '数据纯属示例',
                left: 'center'
            },
            // 提示框配置
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'  // 显示格式
            },
            // 图例配置
            legend: {
                orient: 'horizontal',  // 水平排列
                top: 'bottom',         // 位于底部
                data: ['搜索引擎', '直接访问', '邮件营销', '联盟广告']
            },
            // 系列配置
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '70%'],  // 环形图
                center: ['50%', '50%'],   // 居中显示
                // 数据标签样式
                label: {
                    show: false,
                    position: 'center',
                    formatter: '{b}\n{c} ({d}%)'
                },
                // 高亮样式
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    },
                    scaleSize: 10  // 放大尺寸
                },
                // 数据内容
                data: [
                    { value: 4260, name: '今日' },
                    { value: 4970,  name: '比昨日' },
                    { value: 3454,  name: '本周' },
                    { value: 2390,  name: '上周周期' },
            
                ],
                // 动画效果
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }]
        };

        // 应用配置
        chart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            chart.resize();
        });
    </script>
</body>
</html> 


<!-- <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态数据与时间轴</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 900px;
            height: 500px;
            margin: 30px auto;
     
        }

    </style>
</head>
<body>
    <div id="chart-container"></div>w
    <div class="p1"></div>
    <script>
        // 初始化图表
        var chartDom = document.getElementById('chart-container');
        var myChart = echarts.init(chartDom);
        
        // 生成随机数据的函数
        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            };
        }
        
        // 初始化数据
        let data = [];
        let now = new Date(2005, 3, 1); // 从2005年4月开始
        let oneDay = 24 * 3600 * 1000;
        let value = Math.random() * 1000 + 1500; // 初始值在1500左右
        
        // 生成1000个数据点
        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
        }
        
        // 配置项
        var option = {
            title: {
                text: 'Dynamic Data & Time Axis',
                left: 'center',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return (
                        date.getFullYear() + '年' +
                        (date.getMonth() + 1) + '月' +
                        date.getDate() + '日 : ' +
                        params.value[1]
                    );
                },
                axisPointer: {
                    animation: false
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: function (value) {
                        var date = new Date(value);
                        var month = date.getMonth() + 1;
                        var year = date.getFullYear();
                        
                       
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 500,
                max: 3000,
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: function(value) {
                        // 显示特定的Y轴刻度
                        if ([500, 1000, 1500, 2000, 2500, 3000].indexOf(value) >= 0) {
                            return value;
                        }
                        return '';
                    }
                }
            },
            series: [
                {
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    lineStyle: {
                        width: 2,
                        color: '#5470C6'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
                            { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
                        ])
                    },
                    emphasis: {
                        lineStyle: {
                            width: 3,
                            color: '#4169E1'
                        }
                    },
                    data: data
                }
            ],
            animation: true,
            animationEasing: 'linear',
            animationDuration: 1000
        };
        
        // 应用配置
        myChart.setOption(option);
        
        // 定时更新数据
        setInterval(function () {
            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }
            
            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html> -->


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.2/css/layui.min.css" rel="stylesheet">
</head>
<body>
<div class="layui-timeline">
  <div class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis layui-icon-folder"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">公司员工守则</div>
          <h5 class="layui-timeline-title">2018-11-12</h5>
    </div>
  </div>
  <div class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis layui-icon-folder-open"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">关于员工交易手续费优惠政策通知</div>
      <h5 class="layui-timeline-title">2018-10-12</h5>
    </div>
  </div>
  <div class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis layui-icon-success"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">国庆节安排通知</div>
      <h5 class="layui-timeline-title">2018-10-1</h5>
    </div>
  </div>
  <div class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">818促销日：全场5000送500</div>
      <h5 class="layui-timeline-title">2018-8-18</h5>  
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.2/layui.min.js"></script>
 
</body>
</html>